<template>
    <div class="top">
        <div class="last">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm" size="medium">
                <p>店铺修改</p>
                <el-form-item label="店铺所属人" prop="boss">
                    <el-input v-model="ruleForm.boss"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="mail">
                    <el-input v-model="ruleForm.mail"></el-input>
                </el-form-item>
                <el-form-item label="地址" prop="address">
                    <el-input v-model="ruleForm.address"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="ruleForm.password" type="password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">立即修改</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    name:"changshop",
    data() {
      var checkEmail = (rule, value, callback) => {
            const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
            if (!value) {
            return callback(new Error('邮箱不能为空'))
            }
            setTimeout(() => {
            if (mailReg.test(value)) {
                callback()
            } else {
                callback(new Error('请输入正确的邮箱格式'))
            }
            }, 100)
      };  
      return {
        ruleForm: {
          mail: '',
          password: '',
          boss: '',
          address: ''
        },
        rules: {
          mail: [
              { required: true, message: '请输入邮箱', trigger: 'blur'},
              { validator: checkEmail, trigger: 'blur' }
          ],
          password: [
              { required: true, message: '请输入密码', trigger: 'blur'},
              { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          boss: [
              { required: true, message: '请输入店铺所属人', trigger: 'blur'},
              { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          address: [
              { required: true, message: '请输入店铺地址', trigger: 'blur'},
              { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$axios.post("/api/changeShopData",this.$querystring.stringify({
            email:this.ruleForm.mail,
            password:this.ruleForm.password,
            boss:this.ruleForm.boss,
            address:this.ruleForm.address,
            shopname:this.$cookies.get("shopname")
            })).then(reponse=>{
            console.log(reponse);
            if(reponse.data == true){
                /*
                成功跳转
                */
               alert("修改成功！")
            }else{
                alert("修改失败")
            }
            })
            .catch(error=>{
            console.log(error);
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
}
</script>

<style scoped>
    p{
        text-align: center;
        font-size: 30px;
    }
    .top{
        background-image: url("../assets/r.jpg");
        width: 100%;
        height: 721px;
    }
    .last{
        width: 300px;
        height: 350px;
        padding-top: 100px;
        margin-left: 600px;
    }
    .demo-ruleForm{
        /*padding-top: 200px;
        padding-left: 600px;
        padding-right: 600px;*/
        width: 300px;
    }
</style>